import {
  Card,
  Space,
  Button,
  Tooltip,
  ButtonGroup,
  Radio,
  RadioGroup,
} from '@douyinfe/semi-ui';
import { IconArrowUpLeft } from '@douyinfe/semi-icons';
import CoordinationDetail from './detail';
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import { useSelector, shallowEqual } from 'react-redux';
import { IRootReducerState } from '@/store/root-reducer';
import { usePageContext } from '../context';
import { useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import CoordinationEdit from './edit';
import CoordinationAllocationDetail from './allocation-detail';
import { FormApi } from '@douyinfe/semi-ui/lib/es/form';

const CoordinationEntityCard = ({ editable = false }: any) => {
  const navigate = useNavigate();
  const params = useParams();
  const { id, type } = params;

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      detailRecord: PageContext.detailRecord,
    };
  }, [PageContext]);

  const dispatch = useDispatch<any>();
  const {
    coordination: { entity, key },
  } = useSelector<IRootReducerState, any>(
    (state) => ({ coordination: state.coordination }),
    shallowEqual
  );

  const [formApi, setFormApi] = useState<FormApi<any>>();

  return (
    <Card
      bordered={false}
      title={
        <div className='flex justify-center relative'>
          <Space className='absolute start-0'>
            <Tooltip content='返回'>
              <span style={{ display: 'inline-block' }}>
                <Button
                  icon={<IconArrowUpLeft />}
                  type='tertiary'
                  onClick={() => navigate(-1)}
                />
              </span>
            </Tooltip>
          </Space>
          <RadioGroup
            type='button'
            defaultValue={type}
            onChange={(e) => {
              PageAction.detailRecord(entity[key], e.target.value, true);
            }}
          >
            <Radio value='info'>基本信息</Radio>
            <Radio value='allocation'>应用信息</Radio>
          </RadioGroup>
        </div>
      }
      headerExtraContent={null}
    >
      {editable ? (
        <CoordinationEdit formApiRef={setFormApi} />
      ) : (
        <>
          {
            {
              info: <CoordinationDetail entity={entity} />,
              allocation: <CoordinationAllocationDetail />,
            }[type || 'info']
          }
        </>
      )}
    </Card>
  );
};

export default CoordinationEntityCard;
